<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('my.grxx')" :leftIcon="true"></navbar>
		<view class="content-bg">
			<!-- 标签切换 -->
			<view class="tab-container">
				<view class="tab-item" :class="{ active: activeTab === '0' }" @click="switchTab('0')">
					登录密码
				</view>
				<view class="tab-item" :class="{ active: activeTab === '1' }" @click="switchTab('1')">
					支付密码
				</view>
			</view>
			<!-- 登录密码 -->
			<view class="username-section" v-if="activeTab === '0'">
				<view class="user-form">
					<view class="form-item">
						<view class="label">{{t('password.jmm')}}</view>
						<view class="input-box" :class="{active:oldPassword}">
							<view class="left">
								<image src="/static/icon/old-password.svg" mode=""></image>
								<input :type="openOldPassword?'text':'password'" v-model="oldPassword" :placeholder="t('password.qsrjmm')" />
							</view>
							<view class="right" @click="openOldPassword=!openOldPassword">
								<image :src="openOldPassword?'/static/icon/password-eye.svg':'/static/icon/password-eye-open.svg'"></image>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">{{t('password.xmm')}}</view>
						<view class="input-box" :class="{active:newPassword}">
							<view class="left">
								<image src="/static/icon/haoma.svg" mode=""></image>
								<input :type="openNewPassword?'text':'password'" v-model="newPassword" :placeholder="t('password.qsrxmm')" />
							</view>
							<view class="right" @click="openNewPassword=!openNewPassword">
								<image :src="openNewPassword?'/static/icon/password-eye.svg':'/static/icon/password-eye-open.svg'"></image>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">{{t('password.qrmm')}}</view>
						<view class="input-box" :class="{active:surePassword}">
							<view class="left">
								<image src="/static/icon/haoma.svg" mode=""></image>
								<input :type="openSurePassword?'text':'password'" v-model="surePassword" :placeholder="t('password.qsrqrmm')" />
							</view>
							<view class="right" @click="openSurePassword=!openSurePassword">
								<image :src="openSurePassword?'/static/icon/password-eye.svg':'/static/icon/password-eye-open.svg'"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 确认按钮 -->
				<button class="confirm-btn" @click="confirmChanges">{{ t('common.confirm') }}</button>
			</view>
			<!-- 支付密码 -->
			<view class="username-section" v-if="activeTab === '1'">
				<view class="user-form" v-if="!isHaspassword">
					<view class="form-item">
						<view class="label">{{t('password.cjzfmm')}}</view>
						<view class="input-box" :class="{active:newPayPassword}">
							<view class="left">
								<image src="/static/icon/haoma.svg" mode=""></image>
								<input :type="openNewPayPassword?'text':'password'" v-model="newPayPassword" :placeholder="t('password.qsrzfmm')" />
							</view>
							<view class="right" @click="openNewPayPassword=!openNewPayPassword">
								<image :src="openNewPayPassword?'/static/icon/password-eye.svg':'/static/icon/password-eye-open.svg'"></image>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">{{t('password.qrzfmm')}}</view>
						<view class="input-box" :class="{active:surePayPassword}">
							<view class="left">
								<image src="/static/icon/haoma.svg" mode=""></image>
								<input :type="openSurePassword?'text':'password'" v-model="surePayPassword" :placeholder="t('password.qsrqrzfmm')" />
							</view>
							<view class="right" @click="openSurePassword=!openSurePassword">
								<image :src="openSurePassword?'/static/icon/password-eye.svg':'/static/icon/password-eye-open.svg'"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="user-form" v-else>
					<view class="form-item">
						<view class="label">{{t('password.yzfmm')}}</view>
						<view class="input-box" :class="{active:oldPayPassword}">
							<view class="left">
								<image src="/static/icon/old-password.svg" mode=""></image>
								<input :type="openOldPayPassword?'text':'password'" v-model="oldPayPassword" :placeholder="t('password.qsryzfmm')" />
							</view>
							<view class="right" @click="openOldPayPassword=!openOldPayPassword">
								<image :src="openOldPayPassword?'/static/icon/password-eye.svg':'/static/icon/password-eye-open.svg'"></image>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">{{t('password.xzfmm')}}</view>
						<view class="input-box" :class="{active:newPayPassword}">
							<view class="left">
								<image src="/static/icon/haoma.svg" mode=""></image>
								<input :type="openNewPayPassword?'text':'password'" v-model="newPayPassword" :placeholder="t('password.qsrxzfmm')" />
							</view>
							<view class="right" @click="openNewPayPassword=!openNewPayPassword">
								<image :src="openNewPayPassword?'/static/icon/password-eye.svg':'/static/icon/password-eye-open.svg'"></image>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">{{t('password.qrzfmm')}}</view>
						<view class="input-box" :class="{active:surePayPassword}">
							<view class="left">
								<image src="/static/icon/haoma.svg" mode=""></image>
								<input :type="openSurePassword?'text':'password'" v-model="surePayPassword" :placeholder="t('password.qzcsrxzfmm')" />
							</view>
							<view class="right" @click="openSurePassword=!openSurePassword">
								<image :src="openSurePassword?'/static/icon/password-eye.svg':'/static/icon/password-eye-open.svg'"></image>
							</view>
						</view>
					</view>
				</view>
				<button class="confirm-btn" @click="confirmPayPassword">{{ t('common.confirm') }}</button>
			</view>
		</view>
		<GlobalPopup ref="popup"></GlobalPopup>
	</view>
</template>

<script setup>
	import {
		useI18n
	} from 'vue-i18n';
	import {
		ref,
		computed
	} from 'vue';
	import { userApi } from '@/utils/api.js';
	const {
		t,
		locale
	} = useI18n();
	const isHaspassword = uni.getStorageSync('isHaspassword')||false; //是否已经有密码
	const isInput = ref();
	const oldPassword = ref();
	const newPassword = ref();
	const surePassword = ref();
	const openOldPassword = ref(false); //是否显示密码
	const openNewPassword = ref(false); //是否显示密码
	const openSurePassword = ref(false); //是否显示密码
	const oldPayPassword = ref();
	const newPayPassword = ref();
	const surePayPassword = ref();
	const openOldPayPassword = ref(false); //是否显示密码
	const openNewPayPassword = ref(false); //是否显示密码
	const openSurePayPassword = ref(false); //是否显示密码
	// 当前激活的标签
	const activeTab = ref('0');
	const popup = ref()
	// 切换标签
	const switchTab = (tab) => {
		activeTab.value = tab;
	};
	// 确认登录密码
	const confirmChanges = async () => {
		// 验证输入
		if (!oldPassword.value) {
			uni.showToast({
				title: t('password.qsrjmm'),
				icon: 'none'
			});
			return;
		}
		
		if (!newPassword.value) {
			uni.showToast({
				title: t('password.qsrxmm'),
				icon: 'none'
			});
			return;
		}
		
		if (!surePassword.value) {
			uni.showToast({
				title: t('password.qsrqrmm'),
				icon: 'none'
			});
			return;
		}
		
		if (newPassword.value !== surePassword.value) {
			uni.showToast({
				title: '两次输入的密码不一致',
				icon: 'none'
			});
			return;
		}
		
		if (newPassword.value.length < 6) {
			uni.showToast({
				title: '密码长度不能少于6位',
				icon: 'none'
			});
			return;
		}
		
		try {
			uni.showLoading({
				title: '修改中...',
				mask: true
			});
			
			const result = await userApi.changePassword({
				oldPassword: oldPassword.value,
				newPassword: newPassword.value
			});
			
			uni.hideLoading();
			
			if (result.code === 200 || result.code === 0) {
				// 清除本地存储的用户信息
				uni.removeStorageSync('token');
				uni.removeStorageSync('userInfo');
				
				// 显示成功提示
				uni.showToast({
					title: '密码修改成功，请重新登录',
					icon: 'success',
					duration: 2000
				});
				
				// 延迟跳转到登录页面
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/account/login'
					});
				}, 2000);
			} else {
				uni.showToast({
					title: result.msg || '修改失败',
					icon: 'none'
				});
			}
		} catch (error) {
			uni.hideLoading();
			console.error('修改密码失败:', error);
			uni.showToast({
				title: '修改失败，请稍后重试',
				icon: 'none'
			});
		}
	};
	// 确认支付密码
	const confirmPayPassword = async () => {
		// 如果没有支付密码，创建支付密码
		if (!isHaspassword) {
			// 验证输入
			if (!newPayPassword.value) {
				uni.showToast({
					title: t('password.qsrzfmm'),
					icon: 'none'
				});
				return;
			}
			
			if (!surePayPassword.value) {
				uni.showToast({
					title: t('password.qsrqrzfmm'),
					icon: 'none'
				});
				return;
			}
			
			if (newPayPassword.value !== surePayPassword.value) {
				uni.showToast({
					title: '两次输入的支付密码不一致',
					icon: 'none'
				});
				return;
			}
			
			if (newPayPassword.value.length !== 6) {
				uni.showToast({
					title: '支付密码必须为6位数字',
					icon: 'none'
				});
				return;
			}
			
			try {
				uni.showLoading({
					title: '创建中...',
					mask: true
				});
				
				const result = await userApi.createPayPassword({
					payPassword: newPayPassword.value
				});
				
				uni.hideLoading();
				
				if (result.code === 200 || result.code === 0) {
					uni.setStorageSync("isHaspassword", true);
					popup.value.open({
						title: '创建成功',
						content: '支付密码创建成功',
						loading: false,
						showCancel: false,
						confirmText: '确定'
					});
					// 清空输入框
					newPayPassword.value = '';
					surePayPassword.value = '';
				} else {
					uni.showToast({
						title: result.msg || '创建失败',
						icon: 'none'
					});
				}
			} catch (error) {
				uni.hideLoading();
				console.error('创建支付密码失败:', error);
				uni.showToast({
					title: '创建失败，请稍后重试',
					icon: 'none'
				});
			}
		} else {
			// 修改支付密码
			if (!oldPayPassword.value) {
				uni.showToast({
					title: t('password.qsryzfmm'),
					icon: 'none'
				});
				return;
			}
			
			if (!newPayPassword.value) {
				uni.showToast({
					title: t('password.qsrxzfmm'),
					icon: 'none'
				});
				return;
			}
			
			if (!surePayPassword.value) {
				uni.showToast({
					title: t('password.qzcsrxzfmm'),
					icon: 'none'
				});
				return;
			}
			
			if (newPayPassword.value !== surePayPassword.value) {
				uni.showToast({
					title: '两次输入的新支付密码不一致',
					icon: 'none'
				});
				return;
			}
			
			if (newPayPassword.value.length !== 6) {
				uni.showToast({
					title: '支付密码必须为6位数字',
					icon: 'none'
				});
				return;
			}
			
			try {
				uni.showLoading({
					title: '修改中...',
					mask: true
				});
				
				const result = await userApi.changePayPassword({
					oldPassword: oldPayPassword.value,
					newPassword: newPayPassword.value
				});
				
				uni.hideLoading();
				
				if (result.code === 200 || result.code === 0) {
					popup.value.open({
						title: '修改成功',
						content: '支付密码修改成功',
						loading: false,
						showCancel: false,
						confirmText: '确定'
					});
					// 清空输入框
					oldPayPassword.value = '';
					newPayPassword.value = '';
					surePayPassword.value = '';
				} else {
					uni.showToast({
						title: result.msg || '修改失败',
						icon: 'none'
					});
				}
			} catch (error) {
				uni.hideLoading();
				console.error('修改支付密码失败:', error);
				uni.showToast({
					title: '修改失败，请稍后重试',
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background: rgba(245, 246, 250, 1);
		padding-bottom: 100rpx;
		box-sizing: border-box;

		.content-bg {
			border-radius: 31.4rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 1.74rpx 1.74rpx 5.23rpx rgba(102, 102, 102, 0.25);
			margin: 27.91rpx 34.89rpx;
			padding: 68.03rpx 17.45rpx 109.9rpx 17.45rpx;
		}
	}

	/* 标签切换 */
	.tab-container {
		display: flex;
		justify-content: center;
		margin-bottom: 88.96rpx;
		gap: 38.38rpx;

		.tab-item {
			padding: 20rpx 0;
			font-size: 31.4rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 45.46rpx;
			color: rgba(102, 102, 102, 1);
			position: relative;
			text-align: center;

			&.active {
				color: #333333;
				font-weight: 500;

				&::after {
					content: '';
					position: absolute;
					bottom: -6rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 52.33rpx;
					height: 6.98rpx;
					border-radius: 1742.54rpx;
					background: linear-gradient(90deg, rgba(12, 193, 155, 1) 0%, rgba(91, 220, 222, 1) 34.03%, rgba(5, 145, 198, 1) 65.97%, rgba(2, 120, 220, 1) 100%);
				}
			}
		}
	}

	/* 头像选择区域 */
	.avatar-section {
		margin-top: 38.38rpx;

		.selected-avatar {
			display: flex;
			justify-content: center;
			margin-bottom: 27.91rpx;

			.avatar-preview {
				width: 107.68rpx;
				height: 107.68rpx;
				border-radius: 50%;
			}
		}

		.section-title {
			display: block;
			font-size: 27.91rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.42rpx;
			color: rgba(51, 51, 51, 1);
			margin-bottom: 17.45rpx;
		}

		.avatar-grid {
			// width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 26.17rpx 0 17.45rpx 17.45rpx;
			border-radius: 17.44rpx;
			background: rgba(245, 246, 250, 1);
			margin-bottom: 17.45rpx;

			.avatar-item {
				// width: 20%;
				// padding: 17.45rpx;
				// padding-right: 17.45rpx;
				// padding-bottom: 17.45rpx;
				// margin: ;
				margin-right: 17.45rpx;
				margin-bottom: 17.45rpx;
				// gap: 17.45rpx;
				box-sizing: border-box;
				position: relative;

				.avatar-image {
					width: 95.94rpx;
					height: 95.85rpx;
					border-radius: 50%;
				}

				.check-icon {
					position: absolute;
					right: 0rpx;
					bottom: 10rpx;
					width: 27.91rpx;
					height: 27.91rpx;
					border-radius: 50%;
					background: rgba(42, 130, 228, 1);
					display: flex;
					align-items: center;
					justify-content: center;
					border: 3.49rpx solid rgba(245, 246, 250, 1);

					&::after {
						content: '';
						width: 13.95rpx;
						height: 9.59rpx;
						border-left: 2rpx solid #FFFFFF;
						border-bottom: 2rpx solid #FFFFFF;
						transform: rotate(-45deg) translate(1rpx, -2rpx);
					}
				}
			}
		}

		.color-grid {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			border-radius: 17.44rpx;
			background: rgba(245, 246, 250, 1);
			padding: 26.17rpx 0 17.45rpx 17.45rpx;

			.color-item {
				width: 101.17rpx;
				height: 101.17rpx;
				border-radius: 50%;
				box-sizing: border-box;
				margin-right: 17.45rpx;
				margin-bottom: 17.45rpx;

				&::after {
					content: '';
					display: block;
					width: 100%;
					padding-bottom: 100%;
					border-radius: 50%;
				}

				&.selected {
					position: relative;

					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: calc(100% + 1.74rpx);
						height: calc(100% + 1.74rpx);
						border: 1.74rpx solid rgba(42, 130, 228, 1);
						border-radius: 50%;
						box-sizing: border-box;
					}
				}
			}
		}
	}

	.username-section {
		margin: 71.52rpx 55.82rpx 0 55.82rpx;

		.user-form {

			.label {
				font-size: 27.91rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.42rpx;
				color: rgba(51, 51, 51, 1);
				margin-bottom: 17.45rpx;
			}

			.input-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 27.91rpx;
				background: rgba(249, 250, 251, 1);
				padding: 31.4rpx 52.33rpx;
				margin-bottom: 34.89rpx;
					border: 1.74rpx solid transparent;

				&.active {
					border: 1.74rpx solid rgba(59, 130, 246, 1);
				}

				.left {
					display: flex;
					align-items: center;

					image {
						width: 34.89rpx;
						height: 34.89rpx;
						margin-right: 34.89rpx;
					}



					input {
						width: 100%;
						font-size: 24.42rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 35.36rpx;
						color: rgba(51, 51, 51, 1);
					}
				}

				.right {
					width: 34.89rpx;
					height: 34.89rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.tip-box {
			font-size: 24.42rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 35.36rpx;
			color: rgba(102, 102, 102, 1);
			margin-top: 158.73rpx;
			// margin-bottom: 462.24rpx;
			text-align: center;
		}
	}

	/* 确认按钮 */
	.confirm-btn {
		height: 97.68rpx;
		line-height: 97.68rpx;
		border-radius: 26.16rpx;
		background: linear-gradient(90deg, rgba(12, 193, 155, 1) 0%, rgba(91, 220, 222, 1) 34.03%, rgba(5, 145, 198, 1) 65.97%, rgba(2, 120, 220, 1) 100%);
		font-size: 31.4rpx;
		font-weight: 700;
		color: rgba(255, 255, 255, 1);
		margin-top: 350rpx;
	}
</style>